<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view style="min-height: 100vh" class="bg-grayPink">
    <!--自定义导航栏-->
    <u-navbar
      title="我的"
      leftIcon=""
      :placeholder="true"
      bgColor="#FFFFFF"
      :autoBack="false"
    >
      <image
        class="w-5 h-5 align-top"
        src="/static/icons/icon-my-set.png"
        slot="right"
        @click="goTo('set')"
      />
    </u-navbar>

    <!--订单状态-->
    <view class="mx-4 mt-2.5">
      <view class="rounded-2xl py-2.5" style="background: #e87b9c">
        <view class="mx-4">
          <view class="flex text-white leading-7 text-base"
            >用户编号<text class="mx-2">{{ user.userCode }}</text
            ><u-icon
              name="/static/icons/icon-copy-white.png"
              color="#FFFFFF"
              size="36rpx"
              @click="copyUserCode"
            ></u-icon
          ></view>
          <view class="flex text-white leading-7 text-base"
            >注册手机<text class="mx-2">{{ user.phone }}</text></view
          >
          <view class="border-t border-white opacity-30 my-2.5"></view>
          <view class="flex text-white leading-7 justify-between items-center">
            <view class="text-base">累计节省</view>
            <view class="text-2xl">{{ user.saveAmt }}</view>
          </view>
        </view>
      </view>

      <view
        class="bg-white rounded-2xl mt-3"
        style="box-shadow: 0px 12px 101px 0px rgba(241, 103, 119, 0.1)"
      >
        <view class="py-2.5 flex">
          <view class="w-1/4" @click="orderTo(1)">
            <view class="flex justify-center">
              <u-icon
                name="/static/icons/icon-order1.png"
                size="114rpx"
              ></u-icon>
            </view>
            <view class="text-xs text-center leading-6">待操作</view>
          </view>
          <view class="w-1/4" @click="orderTo(2)">
            <view class="flex justify-center">
              <u-icon
                name="/static/icons/icon-order2.png"
                size="114rpx"
              ></u-icon>
            </view>
            <view class="text-xs text-center leading-6">待审核</view>
          </view>
          <view class="w-1/4" @click="orderTo(3)">
            <view class="flex justify-center">
              <u-icon
                name="/static/icons/icon-order3.png"
                size="114rpx"
              ></u-icon>
            </view>
            <view class="text-xs text-center leading-6">售后</view>
          </view>
          <view class="w-1/4" @click="orderTo(4)">
            <view class="flex justify-center">
              <u-icon
                name="/static/icons/icon-order4.png"
                size="114rpx"
              ></u-icon>
            </view>
            <view class="text-xs text-center leading-6">全部</view>
          </view>
        </view>
        <view class="bg-light rounded" v-if="isShow">
          <view class="mx-2.5">
            <view class="text-xs leading-6">您是否确认要申请该商品</view>
            <view class="flex"></view>
          </view>
        </view>
      </view>
    </view>

    <!--我的菜单-->
    <view class="mx-4 mt-5">
      <view class="bg-white rounded-2xl py-3">
        <view class="mx-4">
          <u-cell-group :border="false">
            <u-cell
              title="我的钱包"
              titleStyle="margin-left:16rpx;"
              :isLink="true"
              rightIconStyle="fontSize:34rpx; color:#666666; margin-right:-28rpx;"
              size="large"
              @click="toWallet()"
            >
              <image
                slot="icon"
                class="w-5 h-5 -ml-4"
                src="/static/icons/icon-my-wallet.png"
              />
            </u-cell>
            <u-cell
              title="我的徒弟"
              titleStyle="margin-left:16rpx;"
              :isLink="true"
              rightIconStyle="fontSize:34rpx; color:#666666; margin-right:-28rpx;"
              size="large"
              @click="levelTo('mer')"
              v-if="user.isTrainee"
            >
              <image
                slot="icon"
                class="w-5 h-5 -ml-4"
                src="/static/icons/icon-my-apprentice.png"
              />
            </u-cell>
            <u-cell
              title="我的师傅"
              titleStyle="margin-left:16rpx;"
              :isLink="true"
              rightIconStyle="fontSize:34rpx; color:#666666; margin-right:-28rpx;"
              size="large"
              :border="false"
              @click="goTo('superior-card')"
              v-if="user.hasParent && user.isShowParentCard"
            >
              <image
                slot="icon"
                class="w-5 h-5 -ml-4"
                src="/static/icons/icon-my-apprentice.png"
              />
            </u-cell>
          </u-cell-group>
        </view>
      </view>
    </view>

    <!--设置密码-->
    <u-modal
      :show="user.hasPasswd == 0"
      @confirm="setTo()"
      ref="uModal"
      title="设置初始密码"
      confirmColor="#FF2B2B"
      confirmText="确定"
      :showCancelButton="false"
      :closeOnClickOverlay="true"
    >
      <view class="w-full">
        <u--form :model="form" :rules="rules" ref="form" errorType="toast">
          <u-form-item prop="passwd">
            <view class="border-b-grayLights h-8 w-full">
              <u--input
                v-model="form.passwd"
                type="password"
                fontSize="32rpx"
                color="#333333"
                placeholderStyle="color: #999999"
                placeholder="请输入密码"
                border="none"
              >
              </u--input>
            </view>
          </u-form-item>
          <u-form-item prop="passwd2">
            <view class="border-b-grayLights h-8 w-full">
              <u--input
                v-model="form.passwd2"
                type="password"
                fontSize="32rpx"
                color="#333333"
                placeholderStyle="color: #999999"
                placeholder="请再次输入密码"
                border="none"
              >
              </u--input>
            </view>
          </u-form-item>
        </u--form>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { initPwd } from '../../services/user';

export default {
  data() {
    return {
      isShow: false,
      form: {
        passwd: '',
        passwd2: '',
      },
      rules: {
        passwd: {
          required: true,
          message: '请输入密码',
        },
        passwd2: [
          {
            required: true,
            message: '请再次输入密码',
          },
          {
            //使用异步方法进行校验
            asyncValidator: (rules, value, callback) => {
              if (value != this.form.passwd) {
                callback(new Error('两次密码校验不一致'));
              }
              return uni.$u.test.object({ values: passwd });
            },
            message: '两次密码校验不一致',
            trigger: ['change', 'blur'],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
    }),
  },
  onShow() {
    this.$store.dispatch('getUser');
  },
  async onPullDownRefresh() {
    await this.$store.dispatch('getUser');
    uni.stopPullDownRefresh();
  },
  methods: {
    toWallet() {
      uni.navigateTo({
        url: '/amount',
      });
    },
    //设置初始密码
    async setTo() {
      this.$refs.form
        .validate()
        .then((res) => {
          //异步执行
          this.setPasswd();
        })
        .catch((errors) => {
          //uni.$u.toast('校验失败')
        });
    },
    async setPasswd() {
      let params = {
        passwd: this.form.passwd.trim(),
        passwd2: this.form.passwd2.trim(),
      };
      const { code, data } = await initPwd(params);
      if (code != 200) return;
      await this.$store.dispatch('getUser');
    },
    //复制用户编号
    copyUserCode() {
      uni.setClipboardData({
        data: this.user.userCode,
        success: function () {
          //console.log('复制成功');
        },
      });
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //跳转订单列表页
    orderTo(type) {
      this.$Router.push({
        name: 'order',
        params: {
          searchType: type,
        },
      });
    },
    //我的徒弟
    levelTo(type) {
      this.$Router.push({
        name: 'my-sub',
        params: {
          type: type,
        },
      });
    },
  },
};
</script>

<style>
page {
  background: #fbf4f5;
}
</style>
